<template>
    <div class="circle-rule" v-if="ruleMsg.rule">
        <div class="circle-rule-position positionFixedCenter" :style="{background:`url(${ruleMsg.backImg}) no-repeat center center / cover`}">
            <div class="sure-start-prize positionRCT">
                <h6 class="rule-title">{{ruleMsg.title}}</h6>
                <div class="rule-line"></div>
                <span class="rule-content" v-if="ruleMsg.rule" v-html="ruleMsg.rule"></span>
                <span class="rule-bottom width-full text-center">
                    <span class="sure-start-btn" @click="$emit('closeRule')" >{{ruleMsg.btnText}}</span>
                </span>
                <img class="rpfr-close-btn" @click="$emit('closeRule')" :src="staticImageUrl('images/close_white_bord.png')" alt="">
            </div>
        </div>
        <v-bord>
            <div slot="cantClick" @click="$emit('closeRule')" class="com_black"></div>
        </v-bord>
    </div>
</template>

<script>
    export default {
        name: "RuleModule2",
        props: {
            ruleProp:Object
        },
        data(){
            return{
                ruleMsg:{
                    title:'活动规则',
                    rule:'',
                    btnText:'我知道了',
                }
            }
        },
        mounted: function () {
            let that = this;
            if(that.ruleProp && that.ruleProp.rule){
                /*处理换行的问题*/
                let getMatchArray =that.ruleProp.rule.match( /\n/ig);
                that.ruleProp.rule = '1.' + that.ruleProp.rule
                if ( getMatchArray && getMatchArray.length > 0 ){
                    getMatchArray.forEach((value,index)=>{
                        that.ruleProp.rule = that.ruleProp.rule.replace(value,`<br />${index+2}.`);
                    })
                }
            }
            this.ruleMsg = Object.assign({},this.ruleMsg,this.ruleProp);
        },
        components:{
            'v-bord':()=>import('../../commonComponents/alert/Bord'),
        },
        watch:{

            ruleProp(val){
                if(val && val.rule){
                    val.replace(/\n/ig,'<br />');
                    this.ruleMsg = Object.assign({},this.ruleMsg,val);

                    /*处理换行的问题*/
                    let getMatchArray = val.rule.match( /\n/ig);
                    val.rule = '1.' + val.rule
                    if( getMatchArray.length > 0 ){
                        getMatchArray.forEach((value,index)=>{
                            val.rule = val.rule.replace(value,`<br />${index+2}`);
                        })
                    }
                    this.ruleMsg = Object.assign({},this.ruleMsg,val);
                }
            }
        },
    }
</script>

<style scoped>
    .circle-rule-position{
        width: 0;
        height: 0;
        z-index: 1060;
    }
    .sure-start-prize{
        width: 3.5rem;
        background-color: #fff;
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .1rem;
        padding: .25rem .15rem .32rem;
    }
    .rule-title{
        background-image: url("../../../assets/images/circle/title-bg.png");
        background-position: center center;
        background-size:100% auto;
        background-repeat: no-repeat;
        text-align: center;
        font-size: .2rem;
        color: #fff;
        padding: .15rem .15rem .2rem;
        width: 2.55rem;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .rule-line{
        background-image: url("../../../assets/images/circle/circle_line.png");
        background-repeat:  repeat-x;
        background-position: left bottom ;
        background-size:.24rem .01rem ;
        height: .01rem ;
        width: 2.55rem;
        position: relative;
        left: 50%;
        margin-top: .15rem;
        transform: translateX(-50%);
    }
    .rule-content{
        display: inline-block;
        padding-top: .2rem;
        line-height: .25rem;
        max-height: 3rem;
        overflow: auto;
        font-size: .12rem;
        color: #515151;
    }
    .rule-bottom{
        display: inline-block;
        padding-top: .45rem;
    }
    .sure-start-btn{
        display: inline-block;
        width: 1.43rem;
        text-align: center;
        color: #fff;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        background-color: #FF0F39;
        height: .26rem;
        line-height: .26rem;
        background-image: linear-gradient(to bottom,#f6b37e,#db8a4b);
    }
    .rpfr-close-btn{
        position: absolute;
        bottom: -.6rem;
        width: .44rem;
        height: .44rem;
        z-index: 1060;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>